<template>
	<div class="all-wrapper">
		<mu-tabs class="my-mu-tabs" :value.sync="active" :full-width="true">
			<mu-tab>动态</mu-tab>
			<mu-tab>专题</mu-tab>
		</mu-tabs>
		<div v-if="active === 0">
			<v-dynamics/>
		</div>
		<div v-if="active === 1">
			<v-topics/>
		</div>
	</div>
</template>

<script>
import dynamics from "./components/discover/Dynamics.vue";
import Topics from "./components/discover/Topics.vue";

export default {
	name: "Explore",
	components: {
		"v-dynamics": dynamics,
		'v-topics': Topics
	},
	data() {
		return {
			active: 0
		};
	},
	methods: {
		openLoading() {
			this.$vs.loading({
				color: '#49A28C',
				type: "sound"
			})
			setTimeout(() => {
				this.$vs.loading.close()
			}, 500);
		},
	},
	created() {
		this.openLoading()
	}
}
</script>

<style scoped>
	.mu-tabs-full-width {
		width: 40% !important;
		background-color: white !important;
		color: black !important;
		font-size: 20px;
	}
	.mu-tabs-full-width .mu-tab{
		flex: none;
		width: 60px;
	}
	.mu-tab-active {
		width: 60%;
		color: black !important;
		font-size: larger !important;
	}
	.my-mu-tabs{
		width: 100%!important;
		height: 56px;
	}
	.all-wrapper{
		background-color: white;
	}
</style>